import React from 'react';
import { Select } from '@library';
import { Form, Input, Checkbox, Dropdown, Slider } from 'antd';
import OptionSetting from '../components/optionSetting/OptionSetting';
import ActionButtonGroup from './actionButtonGroup/ActionButtonGroup';
import ActionSettingController from './_ActionSetting';
import { TabsOptionProps } from './interface';
import { DataItemProps } from './DataListController';
import { formItems } from './DataListController';
import { SketchPicker } from 'react-color';
import CodeMirror from './../codeMirror/CodeMirror';

const FormItem = Form.Item;

const ItemController = ({ curColumn, onInputChange, onChangeColumns, onActionBtnChange }:
  {
    curColumn: TabsOptionProps;
    onInputChange: (key: string, value: string | boolean) => void;
    onChangeColumns: (data: DataItemProps[]) => void;
    onActionBtnChange: (data: DataItemProps[]) => void;
  }) => {
  return (
    <>
      <FormItem label="value" >
        <Input
          defaultValue={curColumn.value}
          onBlur={e => onInputChange('value', e.target.value)} />
      </FormItem>

      <FormItem label="label">
        <Input
          defaultValue={curColumn.lable}
          onBlur={e => onInputChange('lable', e.target.value)} />
      </FormItem>


      <FormItem label="labelEn">
        <Input
          defaultValue={curColumn.labelEn}
          onBlur={e => onInputChange('labelEn', e.target.value)} />
      </FormItem>

      <FormItem label="url" >
        <Input
          defaultValue={curColumn.url}
          onBlur={e => onInputChange('url', e.target.value)} />
      </FormItem>

      <FormItem label="query">
        <Input
          defaultValue={curColumn.query}
          onBlur={e => onInputChange('query', e.target.value)} />
      </FormItem>

      <FormItem label="模糊搜索字段" tooltip="模糊搜索列的字段">
        <Select
          mode="multiple"
          value={(curColumn?.fuzzyField as any)?.map((item: any) => item.value)}
          onChange={(e: any, opt: any) => {
            onInputChange('fuzzyField', opt);
          }}
          fieldNames={{ label: 'label', value: 'value' }}
          url=""
          dataSource={(curColumn.columns || []).map(item => ({
            label: item.title,
            labelEn: item.titleEn,
            value: item.dataIndex,
            key: item.key,
            id: item.key,
          }))}
          placeholder="请选择模糊搜索列"
        />
      </FormItem>


      <FormItem label="显示count" className="antd-form-item-row" tooltip="tab栏上是否显示总数量">
        <Checkbox onChange={(e) => onInputChange(
          'showCount',
          e.target.checked
        )} checked={curColumn.showCount} />
      </FormItem>

      <ActionSettingController
        onChange={(value: string | boolean, key: string) => onInputChange(key, value)}
        formName={curColumn.formName}
        jumpNewPage={curColumn.jumpNewPage}
        hideAddBtn={curColumn.hideAddBtn}
        showRowSelection={curColumn.showRowSelection}
        addUrl={curColumn.addUrl}
        breadCrumbName={curColumn.breadCrumbName}
      />


      <ActionButtonGroup
        dataSource={curColumn.actionBtnGroup || []}
        changeControlProps={onActionBtnChange} />


      <OptionSetting
        name='配置列'
        editInModal
        formItems={formItems}
        formExtra={(initialValues, setInitialValues) => (
          <Form>
            <FormItem label='服务器排序'>
              <Checkbox
                checked={initialValues.serverSortFlag}
                onChange={(e) => setInitialValues({ ...initialValues, serverSortFlag: e.target.checked })}/>
            </FormItem>
            <Form.Item label="自定义样式" >
              <Checkbox
                onChange={(e) => setInitialValues({ ...initialValues, customizeStyleFlag: e.target.checked })}
                checked={initialValues.customizeStyleFlag} />
            </Form.Item>
            {initialValues.customizeStyleFlag && (
              <>
                <Form.Item label="文字大小" >
                  <Slider
                    step={1}
                    min={12}
                    max={28}
                    value={initialValues.fontSize}
                    onChange={(fontSize: any) => setInitialValues({ ...initialValues, fontSize })} />
                </Form.Item>

                <Form.Item label="文字加粗" >
                  <Slider
                    step={100}
                    min={100}
                    max={600}
                    value={initialValues.fontWeight}
                    onChange={(fontWeight: any) => setInitialValues({ ...initialValues, fontWeight })} />
                </Form.Item>

                <Dropdown
                  trigger={['click']}
                  placement='top'
                  overlay={
                    <SketchPicker
                      color={initialValues.backgroundColor}
                      onChange={(color: any) => setInitialValues({ ...initialValues, backgroundColor: color.hex.toLocaleUpperCase() })} />
                  }
                >
                  <Form.Item label='背景颜色'>
                    <Input
                      readOnly
                      value={initialValues.backgroundColor}
                    />
                  </Form.Item>
                </Dropdown>

                <Dropdown
                  trigger={['click']}
                  placement='top'
                  overlay={
                    <SketchPicker
                      color={initialValues.color}
                      onChange={(color: any) => setInitialValues({ ...initialValues, color: color.hex.toLocaleUpperCase() })} />
                  }
                >
                  <Form.Item label='文字颜色'>
                    <Input
                      readOnly
                      value={initialValues.color}
                    />
                  </Form.Item>
                </Dropdown>

                <CodeMirror 
                  label='脚本'
                  scriptText={initialValues.clickScript}
                  change={e => {
                    setInitialValues({ 
                      ...initialValues, 
                      clickScript: e
                    })
                  }}/>
              </>
            )}
          </Form>
        )}
        options={{
          dataSource: curColumn.columns?.map(item => {
            return {
              label: item.title,
              labelEn: item.titleEn,
              value: item.dataIndex,
              key: item.key,
              id: item.key,
              formName: item.formName,
              statusTransfer: item.statusTransfer,
              statusTransferEn: item.statusTransferEn,
              text: item.text,
              moneyFormat: item.moneyFormat,
              width: item.width,
              dateFormat: item.dateFormat,
              fixed: item.fixed,
              customizeStyleFlag: item.customizeStyleFlag,
              fontSize: item.fontSize,
              fontWeight: item.fontWeight,
              color: item.color,
              backgroundColor: item.backgroundColor,
              clickScript: item.clickScript,
              serverSortFlag: item.serverSortFlag
            };
          }) || []
        }}
        changeControlProps={(_, value) => onChangeColumns(value)} />
    </>
  );
};

export default ItemController;